---
title: animate
---
<link href="css/mm-vertical.css" rel="stylesheet" type="text/css"/>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="sidebar-nav">
        <ul class="metismenu" id="menu">
          <li class="active">
            <a href="#" aria-expanded="true">
              <span class="fa fa-fw fa-github fa-lg"></span>
              <span class="sidebar-nav-item">metisMenu</span>
              <span class="fa arrow"></span>
            </a>
            <ul aria-expanded="true">
              <li>
                <a href="https://github.com/onokumus/metisMenu">
                  <span class="fa fa-fw fa-code-fork"></span>
                  Fork
                </a>
              </li>
              <li>
                <a href="https://github.com/onokumus/metisMenu">
                  <span class="fa fa-fw fa-star"></span>
                  Star
                </a>
              </li>
              <li>
                <a href="https://github.com/onokumus/metisMenu/issues">
                  <span class="fa fa-fw fa-exclamation-triangle"></span>
                  Issues
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" aria-expanded="false">Bounce<span class="fa arrow"></span></a>
            <ul aria-expanded="false" class="animated bounce">
              <li>
                <a href="#">bounceIn</a>
                <ul class="animated bounceIn">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">bounceInDown</a>
                <ul class="animated bounceInDown">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">bounceInLeft</a>
                <ul class="animated bounceInLeft">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">bounceInRight</a>
                <ul class="animated bounceInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">bounceInUp</a>
                <ul class="animated bounceInUp">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" aria-expanded="false">Fade<span class="glyphicon arrow"></span></a>
            <ul aria-expanded="false" class="animated fade">
              <li>
                <a href="#">fadeIn</a>
                <ul class="animated fadeIn">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInDown</a>
                <ul class="animated fadeInDown">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInDownBig</a>
                <ul class="animated fadeInDownBig">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInLeft</a>
                <ul class="animated fadeInLeft">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInLeftBig</a>
                <ul class="animated fadeInLeftBig">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInRight</a>
                <ul class="animated fadeInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInRightBig</a>
                <ul class="animated fadeInRightBig">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInUp</a>
                <ul class="animated fadeInUp">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">fadeInUpBig</a>
                <ul class="animated fadeInUpBig">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" aria-expanded="false">Flip<span class="fa arrow"></span></a>
            <ul aria-expanded="false" class="animated flip">
              <li>
                <a href="#">flipInX</a>
                <ul class="animated flipInX">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">flipInY</a>
                <ul class="animated flipInY">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" aria-expanded="false">Zoom<span class="fa arrow"></span></a>
            <ul aria-expanded="false" class="animated swing">
              <li>
                <a href="#">zoomIn</a>
                <ul class="animated zoomIn">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">zoomInDown</a>
                <ul class="animated zoomInDown">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">zoomInLeft</a>
                <ul class="animated zoomInLeft">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">zoomInRight</a>
                <ul class="animated zoomInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">zoomInUp</a>
                <ul class="animated zoomInUp">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>

          <li>
            <a href="#" aria-expanded="false">Slide<span class="fa arrow"></span></a>
            <ul aria-expanded="false" class="animated shake">
              <li>
                <a href="#">slideInDown</a>
                <ul class="animated slideInDown">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">slideInLeft</a>
                <ul class="animated slideInLeft">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">slideInRight</a>
                <ul class="animated slideInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">slideInUp</a>
                <ul class="animated zoomInRight">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
              <li>
                <a href="#">slideInUp</a>
                <ul class="animated zoomInUp">
                  <li><a href="#">item</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-md-9">
      <h3>Support Animate
        <small>with <a href="http://daneden.github.io/animate.css/">animate.css</a></small>
      </h3>
      <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right">
            <span class="fa fa-fw fa-code"></span>
          </span>
        </div>
        <div class="panel-body">
          <pre><code class="language-markup">&lt;ul class="animated bounce"&gt; ... &lt;/ul&gt;</code></pre>

        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {

      $('#menu').metisMenu();

  });
</script>
